<template>
  <div>
    <div class="swiper-container" id="date">
      <swiper :options="swiperOption" class="swiper-wrapper">
        <swiper-slide
          v-for="(e, i) in movieDate"
          :key="i"
          class="swiper-slide"
          :class="`${hindex == i ? 'active' : ''}`"
        >
          <span @click="navLinkage(i, e)">
            {{ e.hasOwnProperty("date") === true ? e.date : e }}
          </span>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  props: ["movieDate"],
  data() {
    return {
      hindex: 0,
      showData: "", //选中的日期
      swiperOption: {
        slidesPerView: 2,
        slidesPerGroup: 2,
        observer: true,
        observeParents: true,
      },
    };
  },
  methods: {
    navLinkage(k, j) {
      this.hindex = k;
      // console.log(k);
      if (j.date) {
        this.showData = j.date;
        // console.log("把日期传给父元素", j.date);
        // 把日期传给父元素
        this.$emit("child-click", this.showData);
      } else {
        this.showData = j;
        // console.log("把日期传给父元素", j);
        // 把日期传给父元素
        this.$emit("child-click", this.showData);
      }
    },
  },
  watch: {
    movieDate(value) {
      //初始化索引
      // console.log('--movieDate-',value);
      this.hindex =0;
    },
  },
  created() {},
  mounted() {},
};
</script>

<style lang="scss" scoped>
#date {
  border-bottom: 1px solid rgb(238, 238, 238);
}
.swiper-slide {
  font-size: 18px;
  padding: 16px 0;
  text-align: center;
  //   color: #f00;
  // background: #ccc;
}
.swiper-slide:first-child::before {
  content: "今天";
  display: inline-block;
  font-size: 18px;
  //   color: #f00;
}
// .swiper-slide:nth-child(2)::before {
//   content: "明天";
//   display: inline-block;
//   font-size: 18px;
//   //   color: #f00;
// }
// .swiper-slide:nth-child(3)::before {
//   content: "后天";
//   display: inline-block;
//   font-size: 18px;
//   //   color: #f00;
// }
.active {
  color: #f00;
}
</style>